import { useEcharts } from "@/hooks/useEcharts";
import { EChartsOption } from "echarts";
import echarts from "@/utils/echarts";
import mapJson from "../assets/china.json";
import "./ChinaMapChart.less";

const ChinaMapChart = () => {
	echarts.registerMap("china", mapJson as any);
	/* echarts sysmbol */
	let planePath: string =
		"path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
	let data = [
		{
			fromName: "北京",
			toName: "上海",
			coords: [
				[116.4551, 40.2539],
				[121.4648, 31.2891]
			]
		},
		{
			fromName: "上海",
			toName: "北京",
			coords: [
				[121.4648, 31.2891],
				[116.4551, 40.2539]
			]
		},
		{
			fromName: "北京",
			toName: "广州",
			coords: [
				[116.4551, 40.2539],
				[113.5107, 23.2196]
			]
		},
		{
			fromName: "广州",
			toName: "北京",
			coords: [
				[113.5107, 23.2196],
				[116.4551, 40.2539]
			]
		},
		{
			fromName: "北京",
			toName: "成都",
			coords: [
				[116.4551, 40.2539],
				[103.9526, 30.7617]
			]
		},
		{
			fromName: "成都",
			toName: "北京",
			coords: [
				[103.9526, 30.7617],
				[116.4551, 40.2539]
			]
		},
		{
			fromName: "成都",
			toName: "新疆维吾尔自治区",
			coords: [
				[103.9526, 30.7617],
				[85.294711, 41.371801]
			]
		},
		{
			fromName: " 新疆维吾尔自治区",
			toName: "成都",
			coords: [
				[85.294711, 41.371801],
				[103.9526, 30.7617]
			]
		}
	];

	const option: EChartsOption = {
		// 悬浮窗
		tooltip: {
			trigger: "item",
			formatter: function (params: any) {
				return `${params.name}: ${params.value || "-"}`;
			}
		},
		// echarts大小位置
		grid: {
			left: "0px",
			right: "80px",
			top: "10px",
			bottom: "10px"
		},
		geo: {
			map: "china",
			zoom: 1.5,
			center: [102.848234, 32.82333],
			scaleLimit: {
				min: 0.8
			},
			label: {
				color: "#fff",
				show: true
			},
			emphasis: {
				label: {
					color: "#fff",
					show: true
				},
				itemStyle: {
					areaColor: {
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [
							{
								offset: 0,
								color: "#073684" // 0% 处的颜色
							},
							{
								offset: 1,
								color: "#2B91B7" // 100% 处的颜色
							}
						]
					}
				}
			},
			roam: false,
			itemStyle: {
				areaColor: {
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [
						{
							offset: 0,
							color: "#073684" // 0% 处的颜色
						},
						{
							offset: 1,
							color: "#061E3D" // 100% 处的颜色
						}
					]
				},
				borderColor: new echarts.graphic.LinearGradient(
					0,
					0,
					0,
					1,
					[
						{
							offset: 0,
							color: "#00F6FF"
						},
						{
							offset: 1,
							color: "#87ADCB"
						}
					],
					false
				),
				shadowColor: "rgba(10,76,139,1)",
				shadowOffsetY: 0,
				shadowBlur: 60,
				borderWidth: 1
			},
			tooltip: {
				show: false
			}
		},
		// 要显示的散点数据
		series: [
			{
				name: "",
				type: "lines",
				coordinateSystem: "geo",
				zlevel: 1,
				effect: {
					show: true,
					period: 6,
					trailLength: 0.7,
					color: "red", //arrow箭头的颜色
					symbolSize: 3
				},
				lineStyle: {
					color: "#fff",
					width: 0,
					curveness: 0.2
				},
				data
			},
			{
				name: "",
				type: "lines",
				coordinateSystem: "geo",
				zlevel: 2,
				symbol: ["none", "arrow"],
				symbolSize: 10,
				effect: {
					show: true,
					period: 6,
					trailLength: 0,
					symbol: planePath,
					symbolSize: 15
				},
				lineStyle: {
					color: "#fff",
					width: 1,
					opacity: 0.6,
					curveness: 0.2
				},
				data
			}
		]
	};

	const [echartsRef] = useEcharts(option, data);

	return (
		<div className="content-box">
			<div className="map-ball"></div>
			<div ref={echartsRef} className="echarts"></div>
		</div>
	);
};

export default ChinaMapChart;
